<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
</head>
<body class="bg-gray-100 h-screen flex flex-col">
    <!-- 顶部导航 -->
    <div class="bg-white p-3 shadow flex items-center sticky top-0 z-10">
        <button class="mr-4"><i class="fas fa-arrow-left"></i></button>
        <h1 class="text-lg font-semibold flex-grow text-center">景点列表</h1>
        <button class="ml-4 text-blue-500"><i class="fas fa-filter"></i></button> <!-- 筛选按钮 -->
    </div>

    <!-- 景点列表区域 -->
    <div class="flex-grow p-2 overflow-y-auto">
        <div class="bg-white p-3 rounded-lg shadow mb-2 flex items-center space-x-3 cursor-pointer hover:bg-gray-50">
            <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8bGFuZHNjYXBlfHx8fHx8MTY4MTIzNDU2OA&ixlib=rb-4.0.3&q=80&w=100&h=100" alt="Attraction A" class="w-16 h-16 rounded object-cover">
            <div class="flex-grow">
                <div class="font-medium">知名景点A</div>
                <div class="text-xs text-gray-500 mt-1"><i class="fas fa-map-marker-alt mr-1"></i> 景区中部</div>
                <div class="text-xs text-yellow-500 mt-1"><i class="fas fa-star mr-1"></i> 4.8</div>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
        </div>

         <div class="bg-white p-3 rounded-lg shadow mb-2 flex items-center space-x-3 cursor-pointer hover:bg-gray-50">
            <img src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8bW91bnRhaW58fHx8fHwxNjgxMjM0NTY5&ixlib=rb-4.0.3&q=80&w=100&h=100" alt="Attraction B" class="w-16 h-16 rounded object-cover">
            <div class="flex-grow">
                <div class="font-medium">山顶观景台</div>
                 <div class="text-xs text-gray-500 mt-1"><i class="fas fa-map-marker-alt mr-1"></i> 景区北部</div>
                <div class="text-xs text-